<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/highcharts.js}"></script>
    <script type="text/javascript" th:src="@{/js/exporting.js}"></script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>数据统计</li>
        <li>出库统计</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form action="/erp/statis/ck/allckstatis" method="post" id="ckstatisform">
        <input type="hidden" name="pageno" id="pageno" value=""/>
        <ul class="tools">
            <li> 所属区域：
                <select name="provinceId" onchange="getCity(this.value)">
                    <option value="0">请选择省份</option>
                    <option th:each="p : ${session.provinces}" th:value="${p.id}" th:text="${p.pName}"
                            th:selected="${p.id==ckStatis.provinceId}?true:false">
                    </option>
                </select>
                <select name="cityId">
                    <option name="0">请选择城市</option>
                </select>
            </li>
            <li> 仓库名称:
                <input type="text" name="cName" th:value="${ckStatis.cName}"/>
            </li>

            <li class="subBut" onclick="goPage(1)"><img th:src="@{/images/t06.png}"/>查询</li>
        </ul>
        <table class="tablelist">
            <thead>
            <tr>
                <th>序号</th>
                <th>仓库名称</th>
                <th>负责人</th>
                <th>所属区域</th>
                <th>出库数量</th>
                <th>金额</th>
                <th>出库明细</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c,var : ${ckstatisinfo.list}">
                <td th:text="${var.count+(ckstatisinfo.pageNum-1)*ckstatisinfo.pageSize}"></td>
                <td th:text="${c.cName}"></td>
                <td th:text="${c.users.uname}"></td>
                <td th:text="${c.province.pName+c.city.cName}"></td>
                <td th:text="${c.amount}"></td>
                <td th:text="${c.total}"></td>
                <td>
                    <a th:href="'/erp1/statis/ck/ckview?id='+${c.warehouseId}" class="tablelink">查看详情</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagin">
            <div class="message">共<i class="blue" th:text="${ckstatisinfo.total}"></i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                                        th:text="${ckstatisinfo.pageNum+'&nbsp;'}">2</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem">
                    <a href="javascript:void(0);"
                       th:onclick="goPage([[${ckstatisinfo.isFirstPage?1:ckstatisinfo.pageNum-1}]])">
                        <span th:class="${ckstatisinfo.isFirstPage?'pagepre':'pagenxt roate'}"></span>
                    </a>
                </li>
                <li th:class="${page==ckstatisinfo.pageNum?'paginItem current':'paginItem'}"
                    th:each="page : ${ckstatisinfo.navigatepageNums}">
                    <a href="javascript:;" th:text="${page}" th:onclick="goPage([[${page}]])">1</a>
                </li>
                <li class="paginItem">
                    <a href="javascript:void(0);"
                       th:onclick="goPage([[${ckstatisinfo.isLastPage?ckstatisinfo.pages:ckstatisinfo.pageNum+1}]])">
                        <span th:class="${ckstatisinfo.isLastPage?'pagepre roate':'pagenxt'}"></span>
                    </a>
                </li>
            </ul>
        </div>
    </form>
</div>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script th:inline="javascript">
    $('.tablelist tbody tr:odd').addClass('odd');

    $(function () {
        var num=$("select[name=provinceId]").val();
        getCity(num);
        tiaozhuang();
    });

    function getCity(num) {
        $.get("/erp1/ajaxCity", {"pid": num}, function (data) {
            $("select[name=cityId]").html("");
            var options = "<option value='0'>请选择城市</option>"
            var c=[[${ckStatis.cityId}]];
            $.each(data, function (i, e) {
                if(c==e.id){
                    options += "<option value='" + e.id + "' selected='selected'>" + e.cname + "</option>";
                }else{
                    options+="<option value='"+e.id+"'>"+e.cname+"</option>";
                }
            });
            $("select[name=cityId]").append(options);
        }, "json");
    };

    function goPage(num) {
        $("#pageno").val(num);
        $("#ckstatisform").submit();
    }

    function tiaozhuang() {
        $.ajax({
            url:"/erp1/statis/ck/tiaozhuang",
            type:"get",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            async:"false",
            success:function (data) {
                var arr = new Array();
                $.each(data, function (i, e) {
                    arr[i] = new Array();
                    for (var j = 0; j < 2; j++) {
                        arr[i][0] = e.cname;
                        arr[i][1] = e.total;
                    }
                });
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: '仓库出库金额统计'
                };
                var subtitle = {
                    text: 'Source:第二小组'
                };
                var xAxis = {
                    type: 'category',
                    labels: {
                        rotation: -30,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                };
                var yAxis ={
                    min: 0,
                    title: {
                        text: '金额 (万元)'
                    }
                };
                var tooltip = {
                    pointFormat: '仓库出库: <b>{point.y:.1f} 万</b>'
                };
                var credits = {
                    enabled: false
                };
                var series= [{
                    name: '金额',
                    data: arr,
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        format: '{point.y:.1f}', // one decimal
                        y: 10, // 10 pixels down from the top
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.credits = credits;
                json.series = series;
                $('#container').highcharts(json);
            }
        });
    }
</script>
</body>
</html>
